<template>
  <el-scrollbar class="props-scrollbar">
    <el-form label-position="top" size="small" class="compact-form">
      <template v-for="(prop, key) in component.props" :key="key">
        <!-- 分组属性 -->
        <el-collapse v-if="prop.group" class="property-group">
          <el-collapse-item :title="prop.label || key">
            <el-form-item 
              v-for="(subProp, subKey) in prop.props" 
              :key="subKey"
              class="compact-form-item"
            >
              <el-tooltip 
                :content="subProp.description" 
                placement="top"
                effect="light"
                v-if="subProp.description"
              >
                <span class="prop-label">
                  {{ subProp.label || subKey }}
                  <el-icon class="info-icon"><info-filled /></el-icon>
                </span>
              </el-tooltip>
              <span v-else class="prop-label">{{ subProp.label || subKey }}</span>
              
              <component
                :is="getPropertyEditor(subProp.type)"
                v-model="componentPropsModel[subKey]"
                v-bind="subProp.editorProps || {}"
                class="compact-control"
              >
                <template v-if="subProp.type === 'select' || subProp.type === 'icon-select'">
                  <el-option
                    v-for="option in subProp.editorProps?.options || []"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </template>
              </component>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
        
        <!-- 普通属性 -->
        <el-form-item 
          v-else
          class="compact-form-item"
        >
          <el-tooltip 
            :content="prop.description" 
            placement="top"
            effect="light"
            v-if="prop.description"
          >
            <span class="prop-label">
              {{ prop.label || key }}
              <el-icon class="info-icon"><info-filled /></el-icon>
            </span>
          </el-tooltip>
          <span v-else class="prop-label">{{ prop.label || key }}</span>
          
          <!-- 单独处理select类型 -->
          <el-select
            v-if="prop.type === 'select' || prop.type === 'icon-select'"
            v-model="componentPropsModel[key]"
            v-bind="prop.editorProps || {}"
            class="compact-control"
          >
            <el-option
              v-for="option in prop.options || prop.editorProps?.options || []"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          
          <!-- 其他类型使用动态组件 -->
          <component
            v-else
            :is="getPropertyEditor(prop.type)"
            v-model="componentPropsModel[key]"
            v-bind="prop.editorProps || {}"
            class="compact-control"
          />
        </el-form-item>
      </template>
    </el-form>
  </el-scrollbar>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'PropsConfig',
  props: {
    component: {
      type: Object,
      required: true
    },
    componentProps: {
      type: Object,
      required: true
    },
    getPropertyEditor: {
      type: Function,
      required: true
    }
  },
  emits: ['update:componentProps'],
  setup(props, { emit }) {
    // 使用计算属性创建双向绑定
    const componentPropsModel = computed({
      get: () => props.componentProps,
      set: (value) => emit('update:componentProps', value)
    })

    return {
      componentPropsModel
    }
  },
  components: {
    InfoFilled
  }
})
</script>

<style scoped>
.props-scrollbar {
  height: 100%;
}

.compact-form {
  padding: 8px;
}

.compact-form-item {
  margin-bottom: 12px;
}

.compact-control {
  width: 100%;
}

.prop-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.info-icon {
  margin-left: 4px;
  color: #999;
  font-size: 12px;
}

.property-group {
  margin-bottom: 8px;
  border: none;
}

.property-group :deep(.el-collapse-item__header) {
  padding: 0 8px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  color: #333;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.property-group :deep(.el-collapse-item__content) {
  padding: 8px 0;
}
</style>